<template>
  <div class="listbody">
    <div v-if="!tableList.length" class="pt_50 flexcenter c_999 nodata">
      暂无数据
    </div>
    <div class="flex flexwrapper">
      <div
        class="advbox bg_fff"
        v-for="(item, index) in tableList"
        :key="index"
      >
        <div class="advheader flexrowbetween">
          <span class="c_000">{{ item.name }}</span>
          <div class="flex">
            <div class="h_btn mr_8 c_000 f-14 flexcenter"  :class="{graybg:item.status == 0}">
              {{ item.status == 1 ? "已开启" : "已暂停" }}
            </div>
          </div>
        </div>
        <div class="p_10 contentbody">
          <div class="textitem c_000 f-14 mb_5">
            <span class="f-13 f_weight">特点：</span>
            {{ item.msg }}
          </div>
          <div class="textitem c_000 f-14 mb_5">
            <span class="f-13 f_weight">操作配合：</span>
            {{ item.text }}
          </div>
          <div class="textitem c_000 f-14 mb_5">
            <span class="f-13 f_weight">收费标准：</span>
          </div>
          <div class="textitem c_000 f-14 mb_5">
            <span class="f-13 f_weight">千次展示付费：</span>
            一类城市千次曝光{{
              item.coin_ecpm_province
            }}广告币，二类城市千次曝光{{
              item.coin_ecpm_city
            }}广告币，三类城市千次曝光{{
              item.coin_ecpm_area
            }}广告币，不限城市千次曝光{{ item.coin_ecpm_all }}广告币。
          </div>
          <div class="textitem c_000 f-14 mb_5">
            <span class="f-13 f_weight">固定广告位展示付费：</span>
            每日{{ item.coin_lock }}广告币
          </div>
          <div class="textitem c_000 f-14 mb_15">
            <span class="f-13 f_weight">点击付费：</span>
            一千次{{ item.coin_click }}个广告币
          </div>
          <div class="flex f-14">
            <div class="flex flexwrapper">
              <span class="f-13 f_weight">图标缩略图：</span>
              <img :src="item.icon" alt="" class="icon_img" />
            </div>
            <div class="flex justifycenter flex1">
              <span class="f-13 f_weight pl_5">投放版位缩略图：</span>
              <img :src="item.position_photo" alt="" class="icon_img2" />
            </div>
            <div class="flex justifycenter flex1">
              <span class="f-13 f_weight pl_5">位置缩略图：</span>
              <img :src="item.photo" alt="" class="icon_img2" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="广告设置"
      :visible.sync="open"
      width="580px"
      :before-close="handleClose"
      :close-on-click-modal="false"
      append-to-body
      class="commdia"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="广告位状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">开启广告位</el-radio>
            <el-radio :label="0">关闭广告位</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="展示区状态" prop="display_status">
          <el-radio-group v-model="form.display_status">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="JS组件：" prop="js_text">
          <el-input v-model="form.js_text" type="textarea" rows="5" placeholder="请输入js组件"  />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="handleClose">取 消</el-button>
        <el-button type="primary" @click="onsubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { positionDisplayIndex, positionEditStatus } from "@/api/flow";
export default {
  data() {
    return {
      tableList: [],
      queryParams: {
        page: 1,
        num: 10,
        plate_id: "",
      },
      open: false,
      form: {
        id: "",
        display_status: undefined,
        status: undefined,
      },
      rules: {
        display_status: [
          { required: true, message: "请选择展示状态", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择广告位状态", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    plateId: {
      require: true,
      default: "",
    },
    type: {
      type: String | Number,
      default: 1,
    },
  },
  created() {
    this.queryParams.plate_id = this.plateId;
    this.getList();
  },
  methods: {
    getList() {
      positionDisplayIndex(this.queryParams).then((res) => {
        this.tableList = res.data.list.map((item) => {
          item.icon = item.icon.startsWith("http") ? item.icon : this.domain + "/" + item.icon;
          item.photo = item.photo.startsWith("http") ? item.photo : this.domain + "/" + item.photo;
          item.position_photo =
            item.position_photo.startsWith("http") ? item.position_photo : this.domain + "/" + item.position_photo;
          return item;
        });
      });
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },

    handleSet(item) {
      this.form.id = item.id;
      this.form.status = item.status;
      this.form.display_status = item.display_status;
      this.open = true;
    },

    handleClose() {
      this.open = false;
    },

    onsubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        positionEditStatus(this.form).then((res) => {
          this.$message.success("设置成功");
          this.getList();
          this.handleClose();
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.listbody {
  height: 100%;
}
.advbox {
  width: 532px;
  height: 400px;
  margin: 20px;
  margin-top: 0;
}
.advheader {
  width: 100%;
  padding: 10px 15px;
  background-color: #d0e3ff;
}
.h_btn {
  width: 70px;
  height: 32px;
  border-radius: 4px;
  background-color: #fff;
}
.textitem {
  line-height: 20px;
}
.icon_img {
  width: 32px;
  height: 32px;
}
.icon_img2 {
  width: 60px;
  height: 115px;
}
.contentbody {
  height: 348px;
  overflow-y: auto;
  padding-left: 15px;
}
.nodata {
  height: 100%;
}
.graybg {
  background-color: #ebebeb;
  color: #6e6c6c;
}
</style>

